<template>
  <div>
    <div class="hidden-xs-only">
      <div class="top-nav"></div>
      <el-header class="header">
        <el-row type="flex" align="middle">
          <el-col :offset="1" :span="5">
            <el-row type="flex" align="middle">
              <el-col :sm="6">
                <el-avatar :size="60">
                      <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                </el-avatar>
              </el-col>
              <el-col :offset="1" :span="17" class="s-font-size-24 s-font-weight-700 s-f-white-color">
                万祥传媒
              </el-col>
            </el-row>
          </el-col>
          <el-col :sm="12">
            <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">
              <el-menu-item v-for="(item,index) in navs" :key="index" :index="item.path" v-if="!item.children" class="s-font-size-20">
                {{item.title}}
              </el-menu-item>
              <el-submenu v-for="(item,index) in navs" :key="index" :index="index+''" v-if="item.children">
                <template slot="title">{{item.title}}</template>
                <el-menu-item v-for="(it,ind) in item.children" :key="ind" :index="it.path">{{it.title}}</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
          <el-col :offset="1" :sm="5">
            <el-row type="flex" align="middle">
              <el-col :sm="4">
                <el-avatar :size="40">
                      <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                </el-avatar>
              </el-col>
              <el-col :offset="1" :sm="17" class="s-font-size-18 s-font-weight-700 s-f-white-color">
                18092444782
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-header>
    </div>
    <div class="hidden-sm-and-up">
      <div class="top-nav-web"></div>
      <el-header class="header el-header-web">
        <el-row type="flex" align="middle" class="el-header-web">
          <el-col :offset="1" :span="5">
            <i class="iconfont icon-dakai s-font-weight-700 s-f-white-color s-font-size-18" @click="drawer = true"></i>
          </el-col>
          <el-col :offset="1" :span="14">
            <el-row type="flex" align="middle" justify="center">
              <el-col :span="3">
                <el-avatar :size="30">
                      <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                </el-avatar>
              </el-col>
              <el-col :offset="1" :span="21" class="s-font-size-18 s-font-weight-700 s-f-white-color">
                万祥传媒
              </el-col>
            </el-row>
          </el-col>
        </el-row>

      </el-header>
      <el-drawer
        :visible.sync="drawer"
        direction="ltr"
        size="60%"
        :withHeader="false"
        >
        <el-row>
          <el-col :span="24" class="s-margin-top-20">
            <el-row type="flex" justify="center" align="middle">
              <el-avatar :size="60">
                    <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
              </el-avatar>
            </el-row>
          </el-col>
          <el-col :span="24" class="s-font-size-22 s-font-weight-700 s-f-white-color s-text-center s-margin-top-20 s-margin-bottom-20">
                18092444782
          </el-col>
        </el-row>
        <el-menu :default-active="activeIndex" mode="vertical" @select="handleSelect" background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item v-for="(item,index) in navs" :key="index" :index="item.path" v-if="!item.children" class="s-font-size-20">
            {{item.title}}
          </el-menu-item>
          <el-submenu v-for="(item,index) in navs" :key="index" :index="index+''" v-if="item.children">
            <template slot="title">{{item.title}}</template>
            <el-menu-item v-for="(it,ind) in item.children" :key="ind" :index="it.path">{{it.title}}</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-drawer>
    </div>
    <!--  -->
  </div>
</template>

<script lang="ts">
import {Vue, Component, Watch} from "vue-property-decorator"
import { Route } from 'vue-router'
@Component
export default class SHeader extends Vue{
  drawer:boolean = false
  activeIndex:string = ''
  navs:any = [
    {
      id:1,
      path:'/',
      title:'首页'
    },
    {
      id:1,
      path:'',
      title:'万祥传媒',
      children:[
        {path:'/goods',title:'万祥传媒2'}
      ]
    }
  ]
  handleSelect(key:string) {
    this.$router.push(key)
  }
  @Watch('$route',{immediate:true,deep:true})
  onRouteChange(route:Route){
    this.activeIndex = route.path
  }
}
</script>

<style lang="scss" scoped>
@import "s-header.scss";
</style>
